<template>
    <div>
        <!--头部-->
		<!--幻灯片-->
		<section class="ab_img">
			<img src="../assets/images/case.jpg">
		</section>
		<!--面包屑-->
		<div class="mianb">
			<div class="container">
				<div class="row">
					<div class="title1">
						<div class="title1_top">
							<h2>医疗服务</h2>
							<span>MEDICAL SERVICE</span>
						</div>
					</div>
					<div class="case_p">
						<p class="p14">凭借阵容强大的专家团队、媲美港台的医疗设备、遵循规范、严谨的作业流程，</p>
						<p class="p14">每年为几十万只宠物提供高品质的服务。范围涵盖：宠物医疗保健、美容造型、寄养、洗浴、SPA、食品及用品等。临床经验丰富的</p>
						<p class="p14">宠物医师，其中硕士35人、博士2人，执业兽医师328人。</p>
					</div>
				</div>
			</div>
		</div>
		<!--科目-->
		<div class="container">
			<div class="row">
				<ul class="col-md-12 case1_top">
					<div v-for="(item, i) of medicalService" :key="i" class="col-lg-3 col-sm-6 col-xs-12">
						<li>
							<a>{{item.cname}}</a>
							<span>{{item.ename}}</span>
						</li>
					</div>
				</ul>
			</div>
		</div>
		<!--专业案例-->
		<div class="al">
			<h3>
				专家案例
				<span>娴熟的技术，先进的医疗器械。</span>
			</h3>
		</div>
		<!--专家案例-->
		<div class="anli">
			<div class="container">
				<div class="row">
					<div class="container-fluid">
						<div class="col-md-6 col-sm-6 col-xs-12">
							<img src="../assets/images/an1.jpg">
						</div>
						<div class="col-md-6 col-sm-6 col-xs-12 jc">
							<h4>股骨粉碎性骨折</h4>
							<p v-for="(item, i) of medicalCase1" :key="i">
								<span>{{item.step_name}}</span>
								{{item.step_content}}
							</p>
						</div>
					</div>
					<div class="container-fluid">
						<div class="col-md-6 col-sm-6 col-xs-12 jc">
							<p v-for="(item, i) of medicalCase2" :key="i" class="pp">
								<span>{{item.step_name}}</span>
								{{item.step_content}}
							</p>
						</div>
						<div class="col-md-6 col-sm-6 col-xs-12">
							<img src="../assets/images/an2.jpg">
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--底部-->
    </div>
</template>

<script>
export default {
    data(){
		return {
			medicalService: [],
			medicalCase1: [],
			medicalCase2: [],
		}
	},
	mounted(){
		this.axios.get('/service/medical_service').then(result => {
			// console.log(result.data.result);
			this.medicalService = result.data.result;
			// console.log(this.medicalService);
		}),
		this.axios.get('/service/medical_case').then(result => {
			// console.log(result.data.result);
			this.medicalCase = result.data.result;
			this.medicalCase1 = result.data.result.splice(0, 2);
			this.medicalCase2 = result.data.result.splice(0, 3);
		})
	}
}
</script>

<style>
.mianb .title1 h2{
	font-size: 30px;
	margin-top: 20px;
    margin-bottom: 10px;
}
</style>